<template>
	<view class="view-main">
		<view class="page-con"  @click="chooseAddressView">
			
			<!-- 正常的 -->
			<view class="con-hd"  v-if="!slotType" >
				<view class="choose-address"
					:class="[{'choose-address3': this.isDizhi}]"
					v-if="!addressInfo || !addressInfo.address"
					>
					<view class="" >
						<text>{{ this.isDizhi ? '请设置您的地址' : '请输入双方见面的地址'}}</text>
						<image
							src="/static/images/rightIcon.webp"
							style="width: 20rpx;height: 20rpx;">
						</image>
					</view>
					
				</view>
				<view class="choose-address2"
					v-else>
					<view class="address2-l">
						<view class="address2-lhd">{{addressInfo.title}}</view>
						<view class="address2-lbd">{{addressInfo.address}}</view>
					</view>
				</view>
			</view>
			
			<!-- 插槽的内容 -->
			<slot v-else></slot>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getMapLocation, // 逆地址解析
		getIndexArea, // 地区下拉列表查询
	} from '@/api/user.js'
	export default {
		options: {
			multipleSlots: true, // 启用slot
		},
		props: {
			/**
			 * 是否是发布活动，不校验所限地址，1是发布活动，0不是
			 */
			typeNumber: {
				type: Number,
				default: 0
			},
			xxx: {
				type: Boolean,
				default: false
			},
			cityCode: {
				type: String
			},
			isDizhi: {
				type: Boolean,
				default: false
			},
			
			/**
			 * 默认标题
			 */
			propsTitle: {
				type:String,
				default: ''
			},
			
			/**
			 * 默认地址
			 */
			PropsAddress:{
				type:String,
				default:''
			},
			
			/**
			 * 是否显示请求地址中的loading
			 */
			propsLoading:{
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				slotType: false, // 是否有插槽
				formData: {
					detailAddress: '',
					userName: '',
					userPhone: '',
					lableName: '家',
					sexType: 1, //1 先生 2 女士
				},
				addressInfo: {
					title: '',
					address: '',
				}, //选中的地址信息
				agreeState: false, //是否是默认地址
				longitude: null,
				latitude: null,
				// markerIcon: require('../../static/marker.png'),
				// seleIcon: require('../../static/sele.png'),
				// sele2Icon: require('../../static/sele2.png'),
				// noseleIcon: require('../../static/no-sele.png'),
				oldObj: ''
			}
		},

		mounted() {
			this.getLocation()
			
			// 判断是否有插槽
			if(Object.keys(this.$slots).length>0){
				this.slotType = true
			}else{
				this.slotType = false
			}
			
			
		},
		methods: {
			//数据回显时使用此方法
			setData(obj) {
				obj.title = this.propsTitle
				obj.address = this.PropsAddress
				
				this.oldObj = obj
				this.formData.detailAddress = obj.detailAddress
				this.formData.userName = obj.userName
				this.formData.userPhone = obj.userPhone
				this.formData.lableName = obj.lableName
				this.formData.sexType = obj.sexType
				this.addressInfo.title = obj.title
				this.addressInfo.address = obj.address
				this.latitude = obj.latitude
				this.longitude = obj.longitude
				this.agreeState = obj.agreeState
				this.getLocation()
			},
			//获取当前的地理位置
			getLocation() {
				
				// 如果传入了这个参数为false，那就不显示，默认显示
				if(this.propsLoading){
					uni.showLoading({
						title: '正在获取定位中...',
					})
				}

				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					geocode: 'true',
					highAccuracyExpireTime: 3500,
					success: (res) => {
						uni.hideLoading();
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					},
					fail: (res) => {
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {}
										})
									} else {
										return false;
									}
								}
							})
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			//保存地址
			submitAddress() {
				if (!this.addressInfo.latitude) {
					uni.showToast({
						duration: 5000,
						title: '请选择收货地址',
						icon: 'none'
					})
					return
				}
				if (!this.formData.detailAddress) {
					uni.showToast({
						duration: 5000,
						title: '请输入门牌号',
						icon: 'none'
					})
					return
				}
				if (!this.formData.userName) {
					uni.showToast({
						duration: 5000,
						title: '请输入联系人',
						icon: 'none'
					})
					return
				}
				if (!this.formData.userPhone) {
					uni.showToast({
						duration: 5000,
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				let obj = {
					...this.formData,
					...this.addressInfo
				}
				obj.agreeState = this.agreeState
				this.$emit('submit', obj)
			},
			//删除地址
			deleteAddress() {
				this.$emit('detele', this.oldObj)
			},
			//选择地址、修改编辑地址
			chooseAddressView() {
				const that = this
				uni.chooseLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: res => {
						if (!res.name || !res.address || !res.latitude || !res.longitude) return

						/**
						 * 赋值
						 */
						const submitData =  (val)=> {

							let addressObj = {
								title: res.name,
								address: res.address,
								latitude: parseFloat(res.latitude),
								longitude: parseFloat(res.longitude),
							}
							
							// if(addressObj.address){
							// 	let str = addressObj.address.split("市")
								
							// 	addressObj.address = str[str.length-1]
							// }
							
							
							if(val){
								addressObj['cityCode'] = val
							}
							this.latitude = res.latitude
							this.longitude = res.longitude
							this.addressInfo = addressObj
							
							this.$emit('submit', this.addressInfo)
						}

						if (!this.xxx) {
							getMapLocation({
								location: `${res.latitude},${res.longitude}`
							}).then((res1) => {
								if (res1.code !== 200) {
									return uni.showToast({
										duration: 5000,
										icon: 'none',
										title: res1.msg || '定位失败,请重新选择地点'
									})
								}
								
								
								// 电话区号
								let phoneAreaCode = res1.data.result.ad_info.phone_area_code
								
								// 不限制城市
								if(that.typeNumber === 1){
									submitData(phoneAreaCode)
									return
								}
								
								// 限制城市
								if(that.typeNumber === 0){
									getIndexArea(that.cityCode).then(myData => {
										if (phoneAreaCode !== myData.data.phoneCode) {
											uni.showToast({
												duration: 5000,
												icon: 'none',
												title: '请选择艺人限定的所在服务区域内地点'
											})
											return
										}
										
										// 赋值
										submitData(phoneAreaCode)
									
									}).catch(err => {
										uni.showToast({
											duration: 5000,
											icon: 'none',
											title: err.msg
										})
									})
								}
								
								




							}).catch(() => {
								uni.showToast({
									duration: 5000,
									title: '定位失败，请重新点击左上角获取当前城市信息',
									icon: 'none'
								})
							})
						} else {
							// 赋值
							submitData()
						}
					},
					fail: (err) => {
						console.log(err, '22222222222');
					}
				});
			},
			//联系人性别选择
			chooseSex(type) {
				this.formData.sexType = type
			},
			//标签选择
			chooseLable(item) {
				this.formData.lableName = item
			},
			//点击隐私协议
			changeAgree() {
				this.agreeState = !this.agreeState
			}
		}
	}
</script>

<style scoped>
	.view-main {
		width: 100%;
		height: 100%;
		/* background: #f3f3f3; */
	}

	.map-marker {
		width: 44rpx;
		height: 62rpx;
		position: absolute;
		top: 15vh;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.map-tip {
		font-size: 20rpx;
		color: #b6b6b6;
		line-height: 42rpx;
		padding: 0 20rpx;
		position: absolute;
		left: 50%;
		top: 30rpx;
		box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
		background-color: #fff;
		border-radius: 4px;
		transform: translateX(-50%);
	}

	.poiss-box {
		width: 100%;
		padding: 20rpx 0;
		background-color: #FFFFFF;
		font-size: 26rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.poiss-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		height: 100rpx;
		padding: 0 24rpx;
		border-bottom: 1px solid #f9f9f9;
	}

	.poiss-item-l {
		width: calc(100% - 184rpx);
	}

	.poiss-item-lhd {
		font-size: 32rpx;
		color: #333333;
		line-height: 48rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.poiss-item-lbd {
		font-size: 28rpx;
		color: #b6b6b6;
		line-height: 42rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.poiss-item-r {
		width: 36rpx;
		height: 36rpx;
		margin: 0 30rpx;
	}

	.primary-btn {
		width: 688rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		background: #3579FF;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.page-con {
		width: 100%;
		/* height: 75vh; */
		/* position: fixed; */
		/* bottom: 0; */
		/* left: 24rpx; */
	}

	.con-hd {
		display: flex;
		align-items: center;
		width: 100%;
		/* height: 128rpx; */
		margin: 0 auto;
		background: #FFFFFF;
		/* box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(88, 102, 123, 0.2); */
		/* border-radius: 24rpx; */
	}

	.choose-address {
		display: flex;
		align-items: center;
		justify-content: center;
		/* width: 92%; */
		/* height: 64rpx; */
		/* margin: 0 auto; */
		/* border-radius: 12rpx; */
		/* border: 2rpx solid #3579FF; */
		font-size: 28rpx;
		color: #8C8A8A;
	}

	.choose-address3 {
		width: 100%;
		padding: 20rpx 10rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-items: center;
		border: 2rpx solid rgba(0, 0, 0, 0.1);
		/* width: 92%; */
		/* height: 64rpx; */
		/* margin: 0 auto; */
		/* border-radius: 12rpx; */
		/* border: 2rpx solid #3579FF; */
		font-size: 28rpx;
		color: #8C8A8A;
	}

	.choose-address2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* width: calc(100% - 48rpx); */
		/* padding: 0 24rpx; */
	}

	.address2-l {
		/* width: calc(100% - 184rpx); */
	}

	.address2-lhd {
		font-size: 28rpx;
		color: #8C8A8A;
		/* font-size: 32rpx; */
		font-weight: bold;
		/* color: #333333; */
		line-height: 48rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.address2-lbd {
		font-size: 28rpx;
		color: #8C8A8A;
		/* line-height: 42rpx; */
		/* text-overflow: ellipsis; */
		/* white-space: nowrap; */
		/* overflow: hidden; */
		overflow: hidden;
		word-wrap: break-word;
		word-break: normal;
	}

	.address2-r {
		width: 144rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #3579FF;
		font-size: 28rpx;
		color: #3579FF;
		line-height: 60rpx;
		text-align: center;
	}

	.con-bd {
		width: 654rpx;
		height: calc(90vh - 160rpx);
		padding: 8rpx 24rpx 0;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.con-bd-item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
	}

	.con-bd-item-name {
		width: 120rpx;
		height: 110rpx;
		text-align: left;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		line-height: 110rpx;
	}

	.con-bd-item-con {
		display: flex;
		align-items: center;
		width: calc(100% - 120rpx);
		height: 108rpx;
		border-bottom: 2rpx solid #F7F7F7;
	}

	.con-bd-item-con input {
		width: 100%;
		height: 60rpx;
	}

	.lable-item {
		width: 88rpx;
		height: 48rpx;
		margin-right: 18rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 2rpx solid #E3E3E3;
		font-size: 24rpx;
		color: #333333;
		line-height: 48rpx;
		text-align: center;
	}

	.lable-item-on {
		background: #3579FF !important;
		border: 2rpx solid #3579FF;
		color: #FFFFFF !important;
	}

	.con-bd-item-con2 input {
		width: 50%;
		height: 60rpx;
	}

	.con-bd-sex-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	.choose-sex-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.con-bd-agree {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 40rpx;
		width: 100%;
	}

	.agreeicon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
		margin-top: 2rpx;
	}

	.agreetext {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #999999;
	}

	.con-ft-btn {
		width: 644rpx;
		height: 88rpx;
		margin-top: 94rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
	}

	.con-ft-btn:last-child {
		margin-top: 32rpx;
	}

	.con-ft-btn1 {
		background: #3579FF;
		color: #FFFFFF;
	}

	.con-ft-btn2 {
		background: #FFFFFF;
		border: 2rpx solid #DEDEDE;
		color: #666666;
	}

	.con-ft-btn3 {
		background: #DEDEDE;
		border: 2rpx solid #DEDEDE;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.input-placeholder {
		font-size: 28rpx;
		color: #999999;
	}
</style>